<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <h3>员工列表</h3>
                </h3>
            </div>
            <table class="table">
                <tr>
                    <td>员工编号</td>
                    <td>员工姓名</td>
                    <td>入职日期</td>
                    <td>员工性别</td>
                    <td>员工籍贯</td>
                    <td>所在部门</td>
                    <td>操作</td>
                </tr>
                <tr th:each="emps : ${pr.rows}">
                    <td>[[${emps.eid}]]</td>
                    <td>[[${emps.ename}]]</td>
                    <td>[[${emps.bdate}]]</td>
                    <td>[[${emps.sex}]]</td>
                    <td>[[${emps.city}]]</td>
                    <td>[[${emps.dname}]]</td>
                    <td>
                        <a href="#" class="btn btn-sm btn-success">修改</a>
                        <a href="#" class="btn btn-sm btn-danger">删除</a>
                    </td>
                </tr>
            </table>
            <div class="panel-footer text-right">
                <!--条件查询部分-->
                <form class="form-inline" method="post" action="/emp/search" style="float:left;margin-top: 15px;">
                    <input type="hidden" name="page" th:value="${pr.page}" id="page">
                    <div class="form-group">
                        <input type="text" name="ename" th:value="${vo.ename}" class="form-control" placeholder="输入员工姓名">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" th:value="${vo.city}" name="city" placeholder="输入员工籍贯">
                    </div>
                    <div class="form-group">
                        <select class="form-control" name="did">
                            <option value="0">所有部门</option>
                            <option th:each="d : ${dept}" th:value="${d.did}" th:selected="${d.did==vo.did ? true:false}">[[${d.dname}]]</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-default btn-sm">查询</button>
                </form>
                <!--分页部分-->
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li th:each="p : ${#numbers.sequence(1,pr.totalPage)}"  th:class="${p == pr.page ? 'active' : ''}">
                            <!--<a th:href="'/emp/findByPage?page='+${p}">[[${p}]]</a></li>-->
                            <a href="javascript:;" th:onclick="skipPage([[${p}]])">[[${p}]]</a>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    function skipPage(p){
        $("#page").val(p)
        document.forms[0].submit();
    }
</script>